<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><!DOCTYPE html>
      <html lang="zh-cn" data-bs-theme="light" xmlns:th="http://www.thymeleaf.org">
      <head>
      <script src="../assets/js/color-modes.js"></script>

      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta name="description" content="">
      <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
      <meta name="generator" content="Hugo 0.118.2">
      <title>Blog Template · Bootstrap v5.3</title>

  <link rel="canonical" href="https://getbootstrap.com/docs/5.3/examples/blog/">


  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">

  <link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">

  <style>
    .avatar {
      width: 50px; /* 调整照片的宽度 */
      height: 50px; /* 调整照片的高度 */
      border-radius: 50%; /* 将照片设置为圆形 */
      object-fit: cover; /* 保持照片比例并填充整个元素 */
    }

    .bd-placeholder-img {
      font-size: 1.125rem;
      text-anchor: middle;
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
    }

    @media (min-width: 768px) {
      .bd-placeholder-img-lg {
        font-size: 3.5rem;
      }
    }

    .b-example-divider {
      width: 100%;
      height: 3rem;
      background-color: rgba(0, 0, 0, .1);
      border: solid rgba(0, 0, 0, .15);
      border-width: 1px 0;
      box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
    }

    .b-example-vr {
      flex-shrink: 0;
      width: 1.5rem;
      height: 100vh;
    }

    .bi {
      vertical-align: -.125em;
      fill: currentColor;
    }

    .nav-scroller {
      position: relative;
      z-index: 2;
      height: 2.75rem;
      overflow-y: hidden;
    }

    .nav-scroller .nav {
      display: flex;
      flex-wrap: nowrap;
      padding-bottom: 1rem;
      margin-top: -1px;
      overflow-x: auto;
      text-align: center;
      white-space: nowrap;
      -webkit-overflow-scrolling: touch;
    }

    .btn-bd-primary {
      --bd-violet-bg: #712cf9;
      --bd-violet-rgb: 112.520718, 44.062154, 249.437846;

      --bs-btn-font-weight: 600;
      --bs-btn-color: var(--bs-white);
      --bs-btn-bg: var(--bd-violet-bg);
      --bs-btn-border-color: var(--bd-violet-bg);
      --bs-btn-hover-color: var(--bs-white);
      --bs-btn-hover-bg: #6528e0;
      --bs-btn-hover-border-color: #6528e0;
      --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
      --bs-btn-active-color: var(--bs-btn-hover-color);
      --bs-btn-active-bg: #5a23c8;
      --bs-btn-active-border-color: #5a23c8;
    }

    .bd-mode-toggle {
      z-index: 1500;
    }

    .bd-mode-toggle .dropdown-menu .active .bi {
      display: block !important;
    }
  </style>


  <!-- Custom styles for this template -->
  <link href="https://fonts.googleapis.com/css?family=Playfair+Display:700,900&amp;display=swap" rel="stylesheet">
  <!-- Custom styles for this template -->
  <link href="../assets/dist/css/blog.css" rel="stylesheet">
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
  <symbol id="check2" viewBox="0 0 16 16">
    <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"></path>
  </symbol>
  <symbol id="circle-half" viewBox="0 0 16 16">
    <path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"></path>
  </symbol>
  <symbol id="moon-stars-fill" viewBox="0 0 16 16">
    <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"></path>
    <path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"></path>
  </symbol>
  <symbol id="sun-fill" viewBox="0 0 16 16">
    <path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"></path>
  </symbol>
</svg>

<div class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle">
  <button class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center" id="bd-theme" type="button"
          aria-expanded="false" data-bs-toggle="dropdown" aria-label="Toggle theme (light)">
    <svg class="bi my-1 theme-icon-active" width="1em" height="1em">
      <use href="#sun-fill"></use>
    </svg>
    <span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
  </button>
  <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="bd-theme-text">
    <li>
      <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="light"
              aria-pressed="true">
        <svg class="bi me-2 opacity-50 theme-icon" width="1em" height="1em">
          <use href="#sun-fill"></use>
        </svg>
        Light
        <svg class="bi ms-auto d-none" width="1em" height="1em">
          <use href="#check2"></use>
        </svg>
      </button>
    </li>
    <li>
      <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark"
              aria-pressed="false">
        <svg class="bi me-2 opacity-50 theme-icon" width="1em" height="1em">
          <use href="#moon-stars-fill"></use>
        </svg>
        Dark
        <svg class="bi ms-auto d-none" width="1em" height="1em">
          <use href="#check2"></use>
        </svg>
      </button>
    </li>
    <li>
      <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="auto"
              aria-pressed="false">
        <svg class="bi me-2 opacity-50 theme-icon" width="1em" height="1em">
          <use href="#circle-half"></use>
        </svg>
        Auto
        <svg class="bi ms-auto d-none" width="1em" height="1em">
          <use href="#check2"></use>
        </svg>
      </button>
    </li>
  </ul>
</div>

<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
  <symbol id="aperture" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
          stroke-width="2" viewBox="0 0 24 24">
    <circle cx="12" cy="12" r="10"></circle>
    <path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"></path>
  </symbol>
  <symbol id="cart" viewBox="0 0 16 16">
    <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l.84 4.479 9.144-.459L13.89 4H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"></path>
  </symbol>
  <symbol id="chevron-right" viewBox="0 0 16 16">
    <path fill-rule="evenodd"
          d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"></path>
  </symbol>
</svg>

<div class="container">
  <header class="border-bottom lh-1 py-3">
    <div class="row flex-nowrap justify-content-between align-items-center">
      <div class="col-4 pt-1">
        <a class="link-secondary" href="#">Subscribe</a>
      </div>
      <div class="col-4 text-center">
        <a class="blog-header-logo text-body-emphasis text-decoration-none" href="/index">今日博客</a>
      </div>
      <div class="col-4 d-flex justify-content-end align-items-center">
        <a class="link-secondary" href="#" aria-label="Search">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor"
               stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="mx-3" role="img"
               viewBox="0 0 24 24"><title>Search</title>
            <circle cx="10.5" cy="10.5" r="7.5"></circle>
            <path d="M21 21l-5.2-5.2"></path>
          </svg>
        </a>
        <a class="btn btn-sm btn-outline-secondary" href="#" id="loginA" style="display: none">登录</a>
        <span th:text="${session.loginUser.getUserNickname()}" id="userNickname"></span>
        <img th:src="'../photo/' + ${session.loginUser.getUserAccount()} +'.png'" alt="User Image" class="avatar">
        <a class="btn btn-sm btn-primary" href="/article/post" style="background-color: red; round-clip: 1">+</a>
      </div>
    </div>
  </header>

  <div class="nav-scroller py-1 mb-3 border-bottom">
    <nav class="nav nav-underline justify-content-between">
      <a class="nav-item nav-link link-body-emphasis active" href="../index">今日</a>
      <a class="nav-item nav-link link-body-emphasis" href="/article/type?articleType=technology&pageIndex=0">科技</a>
      <a class="nav-item nav-link link-body-emphasis" href="/article/type?articleType=politic&pageIndex=0">政治</a>
      <a class="nav-item nav-link link-body-emphasis" href="/article/type?articleType=sports&pageIndex=0">体育</a>
      <a class="nav-item nav-link link-body-emphasis" href="/article/type?articleType=culture&pageIndex=0">文化</a>
      <a class="nav-item nav-link link-body-emphasis" href="/article/type?articleType=business&pageIndex=0">商业和投资</a>
      <a class="nav-item nav-link link-body-emphasis" href="/article/type?articleType=health&pageIndex=0">健康</a>
      <a class="nav-item nav-link link-body-emphasis" href="/article/type?articleType=travel&pageIndex=0">旅行</a>

    </nav>
  </div>
</div>

<main style="font-family: 'PingFang SC Medium'">
  <div >
    <div >
      <div >
        <strong class="d-inline-block mb-2 text-primary-emphasis"
                th:text="${article.getArticleType()}"></strong>
        <h3 class="mb-0" th:text="${article.getArticleTitle()}" style="font-size: 35px"></h3>
        <div class="mb-1 text-body-secondary" th:text="${article.getArticleTime()}"></div>
        <p class="card-text mb-auto" th:text="${article.getArticleContent()}" style="font-size: 20px">文章预览1</p>
      </div>
    </div>
  </div>
</main>
<!-- <div class="row mb-2">
    <div class="col-md-6" th:each="comment: ${comments.getContent()}">
        <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
            <div class="col p-4 d-flex flex-column position-static">
                <h3 class="mb-0" th:text="${article.getArticleTitle()}"></h3>
                <div class="mb-1 text-body-secondary" th:text="${#strings.substring(article.getArticleTime(), 0, 15)}"></div>
                <p class="card-text mb-auto" th:text="${#strings.substring(article.getArticleContent(), 0, 50)}">文章预览1</p>
            </div>
        </div>
    </div>
</div> -->
<div class="ttp-comment-item"><a tabindex="-1" aria-hidden="true" href="/c/user/2990266474302432/?source=tuwen_detail" rel="nofollow" target="_blank" class=""><div class="ttp-avatar auth-none"><img src="https://p3-sign.toutiaoimg.com/user-avatar/c07a107268b10ac49abc2cdc6ee42266~300x300.image?_iz=112761&amp;from=tt_user.tab_comments_comment&amp;lk3s=a67912db&amp;x-expires=1701993600&amp;x-signature=tPsjh65Nv6%2BdP41iWdvecpowBOY%3D" alt=""></div></a><div class="comment-info"><div class="header"><div class="user-info"><a href="/c/user/2990266474302432/?source=tuwen_detail" rel="nofollow" target="_blank"><div class="user-name"><span class="name">青丰7777</span></div></a></div><div class="right-action"><div tabindex="0" role="button" aria-label="点赞29" aria-pressed="false" class="ttp-comment-like icon-default"><div class="inner"><span class="">29</span><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.6547 9.01851L13.0678 8.94922C13.048 9.11689 13.1008 9.28501 13.213 9.41119C13.3251 9.53738 13.4859 9.60957 13.6547 9.60957V9.01851ZM14.0618 5.57064L14.6487 5.63993L14.0618 5.57064ZM9.04306 8.57151L8.52223 8.29208L9.04306 8.57151ZM5.9138 18.7304L5.64546 19.2571L5.9138 18.7304ZM5.03097 17.8476L5.55761 17.5793L5.03097 17.8476ZM18.4092 18.0512L18.901 18.3791L18.4092 18.0512ZM17.5543 18.7741L17.796 19.3135L17.5543 18.7741ZM19.6188 11.9347L19.036 11.8365L19.6188 11.9347ZM19.7277 10.0391L19.1733 10.2442L19.7277 10.0391ZM19.0402 9.22612L18.7459 9.73867L19.0402 9.22612ZM4.81177 10.9756L4.221 10.9572L4.81177 10.9756ZM6.7679 9.0195L6.74946 8.42872L6.7679 9.0195ZM19.036 11.8365L18.308 16.1572L19.4737 16.3536L20.2017 12.0329L19.036 11.8365ZM15.7035 18.3596H8.043V19.5417H15.7035V18.3596ZM5.40185 15.7184V11.1189H4.21973V15.7184H5.40185ZM13.6547 9.60957H17.1529V8.42745H13.6547V9.60957ZM9.5639 8.85094L11.582 5.08933L10.5403 4.53047L8.52223 8.29208L9.5639 8.85094ZM13.4748 5.50135L13.0678 8.94922L14.2417 9.0878L14.6487 5.63993L13.4748 5.50135ZM6.91118 9.60957H8.29598V8.42745H6.91118V9.60957ZM13.0901 4.69329C13.3631 4.86625 13.5126 5.18044 13.4748 5.50135L14.6487 5.63993C14.7399 4.86742 14.3799 4.11109 13.7228 3.69475L13.0901 4.69329ZM8.52223 8.29208C8.47751 8.37544 8.39058 8.42745 8.29598 8.42745V9.60957C8.82611 9.60957 9.31329 9.31808 9.5639 8.85094L8.52223 8.29208ZM8.043 18.3596C7.46756 18.3596 7.07152 18.3591 6.76431 18.334C6.464 18.3095 6.30099 18.2644 6.18214 18.2038L5.64546 19.2571C5.95874 19.4167 6.29464 19.4817 6.66805 19.5122C7.03456 19.5421 7.48706 19.5417 8.043 19.5417V18.3596ZM4.21973 15.7184C4.21973 16.2743 4.21927 16.7268 4.24921 17.0934C4.27972 17.4668 4.34471 17.8027 4.50433 18.1159L5.55761 17.5793C5.49705 17.4604 5.45195 17.2974 5.42741 16.9971C5.40231 16.6899 5.40185 16.2939 5.40185 15.7184H4.21973ZM6.18214 18.2038C5.91324 18.0668 5.69462 17.8482 5.55761 17.5793L4.50433 18.1159C4.75468 18.6073 5.15414 19.0067 5.64546 19.2571L6.18214 18.2038ZM18.308 16.1572C18.2258 16.6448 18.1692 16.9782 18.1056 17.2359C18.0437 17.4863 17.9844 17.6228 17.9175 17.7233L18.901 18.3791C19.0736 18.1203 19.1745 17.8378 19.2531 17.5196C19.33 17.2085 19.3945 16.8237 19.4737 16.3536L18.308 16.1572ZM15.7035 19.5417C16.1802 19.5417 16.5704 19.5421 16.8899 19.5179C17.2167 19.4932 17.5121 19.4407 17.796 19.3135L17.3127 18.2347C17.2025 18.284 17.058 18.3197 16.8008 18.3392C16.5362 18.3592 16.198 18.3596 15.7035 18.3596V19.5417ZM17.9175 17.7233C17.7681 17.9473 17.5584 18.1246 17.3127 18.2347L17.796 19.3135C18.245 19.1124 18.628 18.7884 18.901 18.3791L17.9175 17.7233ZM20.2017 12.0329C20.2844 11.5417 20.3533 11.136 20.38 10.8048C20.4072 10.4682 20.3975 10.146 20.282 9.83395L19.1733 10.2442C19.2025 10.3231 19.2229 10.4471 19.2017 10.7098C19.1801 10.978 19.1222 11.3245 19.036 11.8365L20.2017 12.0329ZM17.1529 9.60957C17.6721 9.60957 18.0234 9.61009 18.2915 9.63332C18.554 9.65607 18.6729 9.69676 18.7459 9.73867L19.3346 8.71357C19.0461 8.54788 18.73 8.48476 18.3935 8.45561C18.0625 8.42693 17.651 8.42745 17.1529 8.42745V9.60957ZM20.282 9.83395C20.1071 9.36113 19.7718 8.96465 19.3346 8.71357L18.7459 9.73867C18.9431 9.85196 19.0944 10.0308 19.1733 10.2442L20.282 9.83395ZM11.582 5.08933C11.8743 4.54443 12.5678 4.36233 13.0901 4.69329L13.7228 3.69475C12.6206 2.99633 11.1572 3.3806 10.5403 4.53047L11.582 5.08933ZM5.40185 11.1189C5.40185 11.0399 5.40193 11.014 5.40255 10.9941L4.221 10.9572C4.21966 11.0002 4.21973 11.0488 4.21973 11.1189H5.40185ZM6.91118 8.42745C6.84112 8.42745 6.7925 8.42738 6.74946 8.42872L6.78634 9.61027C6.8063 9.60965 6.8322 9.60957 6.91118 9.60957V8.42745ZM5.40255 10.9941C5.42609 10.2398 6.03206 9.63381 6.78634 9.61027L6.74946 8.42872C5.37124 8.47174 4.26402 9.57896 4.221 10.9572L5.40255 10.9941Z" fill="#222222"></path><path d="M8.37335 9.26562V19.518" stroke="#222222" stroke-width="1.29874"></path></svg></div></div></div></div><div class="body"><p class="content">头条里这种文章，还有口罩医生讲的哪种药好，都是卖药的，理性看待！</p></div><div class="footer"><div class="left-action"><button class="reply-btn">回复</button><span class="dot">·</span><span class="time">10月28日</span></div><div class="right-action"><div tabindex="0" role="button" aria-label="举报" class="ttp-comment-report"><i></i></div></div></div><button class="check-more-reply">查看全部 1 条回复</button></div></div>
<script src="../assets/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html></title>
</head>
<body>

</body>
</html>